{% extends "base.html" %}

{% block title %}创建订单 - {{ restaurant.name }}{% endblock %}

{% block content %}
<div class="container mt-4">
    <h2>创建订单 - {{ restaurant.name }}</h2>
    
    <!-- 餐厅信息 -->
    <div class="card mb-4">
        <div class="card-body">
            <h5 class="card-title">餐厅信息</h5>
            <p><i class="fas fa-phone"></i> 联系电话: {{ restaurant.phone|default:"暂无" }}</p>
            <p><i class="fas fa-clock"></i> 营业时间: {{ restaurant.business_hours|default:"暂无" }}</p>
        </div>
    </div>

    <!-- 选择菜品表单 -->
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">选择菜品</h5>
            <form method="post" action="{% url 'order:add_to_cart' %}">
                {% csrf_token %}
                <input type="hidden" name="restaurant_id" value="{{ restaurant.id }}">
                
                <div class="mb-3">
                    <label for="menu_item" class="form-label">请选择菜品</label>
                    <select name="menu_item" id="menu_item" class="form-select" required>
                        <option value="">请选择菜品</option>
                        {% for item in menu_items %}
                            <option value="{{ item.id }}" data-price="{{ item.price }}">
                                {{ item.name }} - ￥{{ item.price }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <label for="quantity" class="form-label">数量</label>
                    <input type="number" class="form-control" id="quantity" name="quantity" 
                           value="1" min="1" max="99" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">小计</label>
                    <div id="subtotal" class="form-control-plaintext">￥0.00</div>
                </div>

                <button type="submit" class="btn btn-primary">添加到购物车</button>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const menuItemSelect = document.getElementById('menu_item');
    const quantityInput = document.getElementById('quantity');
    const subtotalDiv = document.getElementById('subtotal');

    function updateSubtotal() {
        const selectedOption = menuItemSelect.options[menuItemSelect.selectedIndex];
        const price = selectedOption ? parseFloat(selectedOption.dataset.price) : 0;
        const quantity = parseInt(quantityInput.value) || 0;
        const subtotal = price * quantity;
        subtotalDiv.textContent = `￥${subtotal.toFixed(2)}`;
    }

    menuItemSelect.addEventListener('change', updateSubtotal);
    quantityInput.addEventListener('input', updateSubtotal);
});
</script>
{% endblock %}
